<template>
	<view class="content">
        <!-- 轮播图结构 -->
	<u-swiper
      :list="swiperList"
      name="image_src"
      height="340"
    ></u-swiper>
    <!-- 导航结构 -->
<view class="cat-nav u-flex" >
    <navigator 
    class="u-flex-1"
    v-for="item in navs"
    :key="item.name"
    >
    <u-image 
    mode="widthFix"
    :src="item.image_src" 
    >
    </u-image>
    </navigator>
</view>
<!-- 楼层结构 -->
<view class="floor">
    <view class="floor-group" 
    v-for="(item1,index1) in floorList"
    :key="index1"
    >
    <u-image
    width="100%"
    mode="widthFix"
    :src="item1.floor_title.image_src"
    ></u-image>
    <!-- 底部图片和上面的图片同处于一个级别 -->
    <!-- navigator:链接，用来跳转 -->
    <!-- 位置处理：左浮动 -->
    <!-- 遍历：没有id用index -->
    <view class="floor-list">
    <navigator
    style="width:33.3%;float:left;"
    v-for="(item2,index2) in item1.product_list"
    :key="index2"
    >
    <!-- 图片渲染:自己写标签 uni-app 设置图片 -->
    <!-- 宽度100% -->
    <!-- 放入图片 -->
    <u-image
    mode="widthFix"
    width="100%"
    :src="item2.image_src"
    >
    </u-image>
</navigator>
    </view>
    </view>

</view>
	</view>
</template>

<script>
	export default {
		 data() {
    return {
    swiperList: [],
    navs:[],
    // 1.楼层数组
    floorList:[]
    };
  },
  async onLoad() {
    const res = await this.$u.get("/home/swiperdata");
    this.swiperList = res.message;
    const navsRes=await this.$u.get("/home/catitems")
    this.navs=navsRes.message
    // 2.获取楼层数据
    // 3.小程序：appData内部的floorList内部是否存在数据
    const floorRes=await this.$u.get("/home/floordata")
    this.floorList=floorRes.message

  },
  }
	// 分析数据
    // 两层循环
    // 第一层：message数组底下的0-1-2
    // 第二层：0-1-2底下的对象再做一次循环
</script>

<style>
</style>
